<template>
  <view :class="['container', currentTheme]">
    <view class="header">
      <text class="title">{{ article.title }}</text>
      <view class="meta">
        <text class="date">{{ article.time }}</text>
        <text class="views">浏览量 {{ article.views }}万</text>
      </view>
    </view>
    <view class="content" v-html="article.content"></view>
  </view>
</template>

<script>
import { getNoticeDetail } from "@/api/employmentGuidance";

export default {
  data() {
    return {
      article: {
        title: '',
        time: '',
        views: 0,
        content: ''
      },
      currentTheme: 'theme1' // 添加主题数据
    };
  },
  onLoad(options) {
    // 加载保存的主题设置
    const savedTheme = uni.getStorageSync('currentTheme');
    if (savedTheme) {
      this.currentTheme = savedTheme;
    }
    // 获取路由参数中帖子的ID
    const id = options.id;
    this.fetchArticleDetail(id);
  },
  onShow() {
    // 页面显示时重新加载主题设置
    const savedTheme = uni.getStorageSync('currentTheme');
    if (savedTheme && savedTheme !== this.currentTheme) {
      this.currentTheme = savedTheme;
    }
  },
  methods: {
    async fetchArticleDetail(id) {
        const res = await getNoticeDetail(id);
        if (res.code === 200) {
          this.article = res.data;
        } else {
          console.error("获取失败，接口返回状态码：", res.code);
          uni.showToast({
            title: "加载失败，请稍后再试",
            icon: "none"
          });
        }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 60rpx;
  background-color: #fff;
  min-height: 100vh;
}

.header {
  margin-bottom: 20rpx;
}

.title {
  font-size: 64rpx;
  font-weight: bold;
  color: #1a1a1a;
  line-height: 1.3;
  display: block; /* 让标题独占一行 */
  margin-bottom: 40rpx; /* 增加标题与meta的距离 */
  letter-spacing: -1rpx; /* 微调字间距 */
}

.meta {
  display: flex;
  gap: 40rpx; /* 增加日期和浏览量的间距 */
  font-size: 30rpx;
  color: #888;
  padding: 20rpx 0;
  border-top: 1px solid #f0f0f0; /* 增加顶部分割线 */
}

/* 内容区域优化 */
.content {
  font-size: 32rpx;
  color: #000;
  line-height: 2; /* 优化行高，提升阅读体验 */
  padding:20rpx;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .container {
    padding: 40rpx 30rpx;
  }
  .title {
    font-size: 52rpx;
    margin-bottom: 30rpx;
  }
  .content {
    font-size: 32rpx;
    line-height: 1.8;
  }
}

/* 主题样式 */
/* Theme 1 - 蓝色主题 */
.container.theme1 {
  background-color: #F8FBFF;
}

.container.theme1 .title {
  color: #2C3E50;
  font-weight: 600;
}

.container.theme1 .meta {
  color: #5A6C7D;
  border-top: 1px solid #E8F4FD;
}

.container.theme1 .content {
  color: #2C3E50;
}

/* Theme 2 - 棕色/米色主题 */
.container.theme2 {
  background-color: #FDF8F3;
}

.container.theme2 .title {
  color: #3E2723;
  font-weight: 600;
}

.container.theme2 .meta {
  color: #6D4C41;
  border-top: 1px solid #F5E6D3;
}

.container.theme2 .content {
  color: #3E2723;
}

/* 禁用所有动画和过渡效果 */
.container * {
  transition: none !important;
  animation: none !important;
}
</style>